<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="__STATIC__/lay/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/lay/css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                    <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button> -->
                </div>
            </script>
            <div>
                <div class="layui-btn-group">
                    <button class="layui-btn" id="btn-expand">全部展开</button>
                    <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                </div>
                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
            </div>
        </div>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="__STATIC__/lay/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="__STATIC__/lay/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var treetable = layui.treetable;

            // 渲染表格
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'pid',
                toolbar: '#toolbarDemo',
                elem: '#munu-table',
                url: '/admin/power/init',
                page: false,
                cols: [
                    [{
                            type: 'numbers'
                        },
                        {
                            field: 'title',
                            minWidth: 200,
                            title: '权限名称'
                        },
                        {
                            field: 'icon',
                            title: '权限标识'
                        },
                        {
                            
                            field: 'href',
                            title: '菜单url'
                        },
                        {
                            field: 'sort',
                            width: 120,
                            align: 'center',
                            title: '排序号'
                        },
                        {
                            field: 'is_menu',
                            width: 120,
                            align: 'center',
                            templet: function (d) {
                                if (d.is_menu == 0) {
                                    return '<span class="layui-badge layui-bg-gray">权限</span>';
                                }
                                if (d.pid == -1) {
                                    return '<span class="layui-badge layui-bg-blue">目录</span>';
                                } else {
                                    return '<span class="layui-badge-rim">菜单</span>';
                                }
                            },
                            title: '类型'
                        },
                        {
                            templet: '#auth-state',
                            width: 120,
                            align: 'center',
                            title: '操作'
                        }
                    ]
                ],
                done: function () {
                    layer.closeAll('loading');
                }
            });

            $('#btn-expand').click(function () {
                treetable.expandAll('#munu-table');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#munu-table');
            });

            //监听工具条
            table.on('tool(munu-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;



                if (layEvent === 'del') {

                    layer.confirm('确定删除？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        $.ajax({
                            type: "post",
                            url: "/admin/power/del",
                            data: {
                                'id': data.id
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 1) {
                                    layer.msg('删除成功')
                                    window.location.reload()
                                }
                            }
                        });
                        // layer.msg('的确很重要', {
                        //     icon: 1
                        // });
                    }, function () {
                        // layer.msg('也可以这样', {
                        //     time: 20000, //20s后自动关闭
                        //     btn: ['明白了', '知道了']
                        // });
                    });

                    // layer.msg('删除' + data.id);
                } else if (layEvent === 'edit') {

                    var index = layer.open({
                        title: '修改权限',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        data: {
                            id: data.id
                        },
                        area: ['60%', '80%'],
                        content: '/admin/power/add',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    // layer.msg('修改' + data.id);
                }
            });


            table.on('toolbar(munu-table)', function (obj) {
                if (obj.event === 'add') { // 监听添加操作
                    var index = layer.open({
                        title: '添加权限',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        data: {
                            id: 0
                        },
                        area: ['60%', '80%'],
                        content: '/admin/power/add',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                } else if (obj.event === 'delete') { // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId'),
                        data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
            });
        });
    </script>
</body>

</html>